<template>
  <div>
    <h4 class="title">页面配置</h4>

    <!-- <el-row type="flex" align="middle">
      <el-col :span="6">
        <div class="prop-set-title">
          添加脚本
        </div>
      </el-col>
      <el-col :span="18">
        <el-button type="mini" @click="editorVisible=true">编辑脚本</el-button>
      </el-col>
    </el-row> -->

    <!-- 编写脚本 -->
    <el-dialog title="编写脚本" :visible.sync="editorVisible" width="70%">
      <div>
        <editor v-model="content" :options="options" @init="editorInit" lang="javascript" theme="chrome" width="100%" height="350"></editor>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editorVisible = false">取 消</el-button>
        <el-button type="primary" @click="exec">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    components: {
      editor: require('vue2-ace-editor')
    },
    mounted(){
        this.content = 
  ` window.$("#id").click(function (){
    alert('xxxx')
  })`
    },
    data () {
      return {
        content: ``,
        editorVisible: false,
        //通过配置options的值配置语法提示
        options: {/*vue2-ace-editor编辑器配置自动补全等*/
          enableBasicAutocompletion: true,
          enableSnippets: true,
          enableLiveAutocompletion: true/*自动补全*/
        }
      }
    },
    methods: {
      editorInit: function () {
        require('brace/ext/language_tools') //language extension prerequsite...             
        require('brace/theme/chrome')
        require('brace/mode/html')    //language
        require('brace/snippets/html') //snippet
        require('brace/mode/javascript')    //language
        require('brace/snippets/javascript') //snippet

      },
      exec () {
        eval("("+this.content+")")
        this.editorVisible=false
      }
    }
  }
</script>

<style  scoped>
.title {
  text-align: center;
  line-height: 24px;
  margin-bottom: 10px;
}
</style>